export default (hook) => {
	const { $jiess } = hook.$m;
	return {
		isJiess: true,
		name: 'JiessBetween',
		setup({
			left,
			right,
			style,
			leftWidth = '',
			rightWidth = '',
			leftStyle = {},
			rightStyle = {},
			...other
		}) {
			const renderItem = (item, align) => {
				if (typeof item === 'function') {
					return {
						is: $jiess().JiessComponent,
						setup() { this.add(item.call(this)) }
					};
				} else {
					let style = {};
					let width = '100%';
					if (align === 'right') {
						width = rightWidth;
						style = rightStyle;
					} else if (align === 'left') {
						width = leftWidth;
						style = leftStyle;
					}
					return {
						class: align,
						children: item,
						style: { ...style, width, textAlign: align }
					};
				}
			};
			this.add({
				class: 'jiess-between',
				style: { display: 'flex', justifyContent: 'space-between', ...style },
				children: [
					renderItem(typeof left === 'function' ? left.call(this) : left, 'left'),
					renderItem(typeof right === 'function' ? right.call(this) : right, 'right')
				],
				...other
			});
		}
	}
}